<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
            售楼小姐姐 ={
                a: [fn1,fn2,fn3],
                c: [fn1,fn2,fn3],
                d: [fn1] // 如果没有d  添加 键值对  值是一个空数组
                // 如果有d 将 fn1 加入到d 对应的数组 
            }
        */
        class Observer {
            constructor(name) {
                this.name = name;
                this.message = {}  // 花名册

            }

            add(type,fn) { 

                if(!this.message[type]) {
                    this.message[type] = [];

                }
                // fn不在 type对应的数组中  才把fn加入到type对应的数组中
                this.message[type].indexOf(fn) === -1 && this.message[type].push(fn);
            }  // 可以往花名册上加

            trigger(type) { 
                if(!this.message[type]) return; // type是否在花名册上有
                // 组装一个事件对象
                // 事件对象中是发布者给到订阅者的内容 
                const e = {
                    type,
                    target: this.name,
                    time: new Date(),
                    love:'处个对象呗,可以抱抱得得那种'
                }
                this.message[type].forEach(item => item(e))
            } // 发布者触发花名册上面的回调函数

            remove(type,fn) {
                if(!this.message[type]) return;
                // console.log(fn)
                console.log(this.message[type])
                if(!fn){
                    return delete this.message[type];
                }
                // 如果fn存在  那么就把fn从type对应的数组中移除
                // 留下其他的 
                this.message[type] = this.message[type].filter(item => item !== fn)
             } // 移除或者取消 花名册上的回调函数 
        }

        const hongbin = new Observer('赵洪斌');

        // 准备处理 
        function maila(){
            console.log('我是小哥哥a')
        } 
        function mailb(e){
            console.log('我是小哥哥b',e)
        } 
        function mailc(e){
            console.log('我是小哥哥c',e)
        } 

        // e 表示  发布者 可以随身传递一些消息 给到订阅者 
        function maild(){
            console.log('我是小哥哥d')
        } 

        hongbin.add('a',maila);
        hongbin.add('a',mailb);
        hongbin.add('b',mailc);
        hongbin.add('b',maild);
        hongbin.add('c',maila);
        hongbin.add('c',mailb);
        hongbin.add('d',maila);
        hongbin.add('d',mailb);


        // console.log(hongbin.message)


        // hongbin.remove('a',maila);
        // // 传了 maila 说明  把 a 对应的 数组中的方法  移出掉  
        // hongbin.remove('a'); // 不写fn 说明 要把这个整个a 干掉 

        // console.log(hongbin.message)
        hongbin.trigger('b')

    </script>
</body>

</html>